Skip to content

fix: prevent horizontal overflow on media page mobile layout#10

Open
adamhake wants to merge 100 commits intomainfrom
claude/fix-issue-01DC5UiPm95FWu6cjVM5M7sS
Open

fix: prevent horizontal overflow on media page mobile layout#10
adamhake wants to merge 100 commits intomainfrom
claude/fix-issue-01DC5UiPm95FWu6cjVM5M7sS

Conversation

@adamhake
Copy link
Copy Markdown
Owner

@adamhake adamhake commented Dec 7, 2025

Wrap MUI Masonry component with overflow-hidden container to prevent extra spacing on the right side in single-column mobile layout.

Fixes #9

claude and others added 30 commits November 15, 2025 00:10
- Move next/prev navigation buttons below image on mobile for better UX
- Fix overlay to properly cover full screen with min-h-screen and min-w-full
- Increase image real estate on mobile by hiding side buttons (max-h-[calc(100vh-180px)])
- Add fixed bottom navigation bar on mobile with larger touch targets
- Disable and dim buttons at first/last image for better visual feedback
- Desktop layout unchanged (buttons remain on sides)
- Changed event hero from fixed h-[55vh] to min-h-[55vh] to allow content to expand on mobile
- Added proper padding (px-4 py-8) to hero content container to prevent overflow
- Redesigned EventStatusChip for better visibility in both light and dark modes:
  - Past events: Semi-transparent dark background with light text for better contrast
  - Upcoming events: Vibrant accent background with high-contrast text
  - Added shadow and improved padding for better readability
Replace dark grey backgrounds with transparent or primary color variants to eliminate clash with dark green theme. Changes include:
- Get Involved: transparent background with accent border in dark mode
- Event cards: remove grey overlays, use consistent primary colors
- Input fields and social buttons: transparent backgrounds with subtle borders
- Increased mobile hero height to min-h-[70vh] (from 55vh) to accommodate content
- Changed content positioning on mobile to items-end with generous top padding (pt-20) to keep chip away from header
- Adjusted padding: pb-12 on mobile for bottom spacing, lg:py-8 on desktop
- Desktop maintains centered layout with original 55vh height
- Updated Past event chip to use subtle primary green colors instead of grey:
  - Light mode: bg-primary-800/60 with text-primary-50
  - Dark mode: bg-primary-700/50 with text-primary-100
- Maintains vibrant accent blue for Upcoming events
- Changed bottom padding from pb-12 to pb-16 on mobile
- Provides better visual separation between event content and decorative wave element
- Add complete Open Graph and Twitter Card metadata to all pages (Privacy Policy, Amenities, Events)
- Add canonical URLs for better SEO across all pages
- Fix Footer navigation link for Events (was incorrectly pointing to /#events instead of /events)
- Add og:image tags for better social media sharing
- Ensure all pages have consistent and complete meta tags

All public-facing pages now have:
- Open Graph meta tags (og:title, og:description, og:type, og:url, og:image)
- Twitter Card meta tags (twitter:title, twitter:description, twitter:image)
- Canonical URLs
- Proper image dimensions for social sharing
…S51KzTEcGkCQXfZJ

Review site pages before launch
Set base directory to monorepo root to ensure environment variables
(SANITY_STUDIO_PROJECT_ID, etc.) are properly available during build.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Turborepo needs to know which environment variables to make available
during builds. Added SANITY_STUDIO_* variables to build task env array
so they're properly inlined into the client bundle.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Created eslint.config.js using @sanity/eslint-config-studio
- Added lint script to package.json
- Configured ignores for dist, .sanity, and auto-generated types

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Turborepo cache directory should not be committed to version control.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Created eslint.config.js with TypeScript ESLint preset
- Added @eslint/js and typescript-eslint dependencies
- Configured ignores for dist and node_modules
- Fixes lint error when running from monorepo root

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Excluded scripts directory from linting (migration scripts)
- Fixed ThemeToggle to use useSyncExternalStore for SSR/CSR handling
- Removed unused InfoCard import from amenities page
- Replaced all TypeScript 'any' types with proper types:
  - Added PortableTextBlock type for portable text content
  - Used StaticEvent union type for event pages
  - Proper type guards for Sanity vs static events

All workspaces now pass linting with zero errors.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Created shared .prettierrc.json at monorepo root
- Created .prettierignore to exclude build outputs and auto-generated files
- Added web app-specific config for Tailwind CSS plugin
- Added format script to studio package
- Updated sanity-config format script to format all files
- Added format task to turbo.json for monorepo-wide formatting

All packages now support: pnpm format
Root command available: pnpm format (formats all packages)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Changed homepage hero image from direct image upload to a reference
to mediaImage document. This prevents duplicate assets and allows
reusing images from the media library.

Changes:
- Updated homePage schema to use reference instead of image type
- Updated homepage query to expand mediaImage reference
- Hero image now references existing media library images

Benefits:
- Avoids duplicate image assets
- Maintains single source of truth for images
- Easier asset management in Sanity Studio

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Migration script to clear old image structure from homepage hero field.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Adds external_node_modules configuration to prevent bundling of @netlify/blobs in Edge Functions, as it's provided by Netlify's Edge runtime.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
adamhake and others added 25 commits November 23, 2025 00:49
The v2 release changed from default export to named export and moved
types to the main module entry point.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Implement newsletter subscription functionality using Resend's
Contacts/Audiences API for subscriber management:

- Add newsletter signup form with Cloudflare Turnstile spam protection
- Create API endpoint that adds contacts to Resend audience
- Add useNewsletterSignup hook for form state management
- Integrate newsletter form into Get Involved page
- Add RESEND_AUDIENCE_ID environment variable support

This approach uses Resend as the single source of truth for
newsletter subscribers, simplifying the architecture by avoiding
a separate Sanity schema for subscriptions.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Fix rate limiting memory leak by removing setInterval and adding
  inline cleanup when map size exceeds threshold
- Improve SubscribeResponse type with discriminated union for
  type-safe success/error handling
- Add email trimming to prevent duplicate entries
- Add focus management for accessibility on success message
- Add admin email domain validation (only send to verified domain)
- Make 'from' email configurable via NEWSLETTER_FROM_EMAIL env var
- Improve error messages to be more user-friendly with contact info
- Add test coverage with vitest (18 passing tests)
- Document new environment variables in .env.example

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Security:
- Restrict CORS to Sanity Studio origins in generate-metadata API
- Add Sanity CDN URL validation to prevent SSRF attacks
- Add Secure flag to draft preview cookie in production
- Hide error stack traces in production ErrorBoundary

Accessibility:
- Add aria-labels to social media links in header
- Add screen reader heading to ImageGallery lightbox modal
- Fix stable React keys in ImageGallery (use asset IDs)

Code Quality:
- Create centralized query-config.ts with cache presets
- Consolidate SanityImage types with sanity-types.ts
- Add timezone (America/New_York) to date formatting
- Make admin email domain configurable via env var
- Improve error handling consistency in events route
- Add explicit Button props instead of index signature

UX:
- Add loading spinner to donation iframe
- Fix Projects link highlighting bug in mobile menu

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Sanity's bundler replaces process.env.SANITY_STUDIO_* at build time.
Using it directly instead of through T3 Env ensures proper replacement.
- Lighten hero overlays from 75/50/30% to 60/40/20% for better image visibility
- Standardize card overlays to 55% with dark mode variants
- Add subtle hover states to Vision cards (lift + shadow)
- Refine button interactions with brightness hover and softer press scale
- Fix dark mode consistency in Header mobile menu and NewsletterForm
- Add dark mode focus ring to buttons
- Document overlay and border standards in design system

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Changed layout approach to use flexbox:
- Header now uses flex flex-col for vertical layout
- Content container uses flex-1 to fill available space
- Content remains relative positioned (not absolute)

This allows the hero to:
1. Properly center content vertically when shorter than min-height
2. Expand naturally when content exceeds the min-height

Fixes #7

Co-authored-by: Claude <noreply@anthropic.com>
Wrap MUI Masonry component with overflow-hidden container to prevent
extra spacing on the right side in single-column mobile layout.

Fixes #9
@netlify
Copy link
Copy Markdown

netlify bot commented Dec 7, 2025

Deploy Preview for cfc-studio canceled.

Name Link
🔨 Latest commit 70f757f
🔍 Latest deploy log https://app.netlify.com/projects/cfc-studio/deploys/6935b67ef1cde100072e3811

@netlify
Copy link
Copy Markdown

netlify bot commented Dec 7, 2025

Deploy Preview for chimboparkconservancy ready!

Name Link
🔨 Latest commit 70f757f
🔍 Latest deploy log https://app.netlify.com/projects/chimboparkconservancy/deploys/6935b67e19b2ee0008a6e7ce
😎 Deploy Preview https://deploy-preview-10--chimboparkconservancy.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@adamhake
Copy link
Copy Markdown
Owner Author

adamhake commented Dec 7, 2025

@claude The spacing is still off on the right

Browser metadata
Path:      /media/
Browser:   Mobile Safari 26.2 on iOS 18.7
Viewport:  393 x 695 @3x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

Prevent horizontal scrolling on mobile by applying overflow-x-hidden
to the main content area. This complements the Masonry wrapper fix.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Media Page mobile layout

2 participants